<script lang="ts" setup>
import { ElMessage, FormRules } from 'element-plus';
import { reactive, ref } from 'vue';
import {  Lock } from '@element-plus/icons-vue'
import { repasswordServer,checkpasswordServer } from '@/api/user.js';
import router from '@/router';

const ckpwdServer = () => {
    let result = checkpasswordServer(addData.value.password) as any;
    addData.value.isqr = result
    ElMessage.success(result.message ? result.message : '密码正确')
}
const dialogVisible = ref(false)
const reg_password = /(^(?![0-9]+$)(?![a-zA-Z]+$)[0-9a-zA-Z]{5,20}$)/
const dialogname = ref('')
interface RuleForm {
    password: String,
    rePassword: String,
    newpassword: String,
    checknewpwd:String,
    isqr:Boolean

}

const addData = ref<RuleForm>({
    password: '',
    rePassword: '',
    newpassword: '',
    checknewpwd:'',
    isqr:true
})

const checkpassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请输入密码'))
    } else if (!addData.value.isqr) {
        callback(new Error('密码错误，请再次输入'))
    } else {
        callback()
    }
}

const checkrepassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次确认密码'))
    } else if (value !== addData.value.password) {
        callback(new Error('两次密码输入不一致，请再次输入'))
    } else {
        callback()
    }
}

const checknewpassword = (rule, value, callback) => {
    if (value === '') {
        callback(new Error('请再次确认新密码'))
    } else if (value !== addData.value.newpassword) {
        callback(new Error('两次密码输入不一致，请再次输入'))
    } else {
        callback()
    }
}

const rules = reactive<FormRules<RuleForm>>({


    password: [
        { validator: checkpassword, trigger: 'blur' },
    ],

    rePassword: [
        { validator: checkrepassword, trigger: 'blur' }
    ],

    newpassword: [
        { required: true, message: '请输入新密码', trigger: 'blur' },
        { pattern: reg_password, message: '密码要求5到20位的数字和字母的组合', trigger: 'blur' }
    ],

    checknewpwd: [
        { validator: checknewpassword, trigger: 'blur' }
    ],
})



const repassword = async () => {
    dialogVisible.value = false;
    let result = await repasswordServer(addData.value) as any;
    ElMessage.success(result.message ? result.message : '修改成功')
    router.push('/login')
}

const showrepassword = () =>{
    dialogVisible.value = true;
    dialogname.value = '修改密码';
}


</script>


<template>
    <el-card style="max-width: 100%">
        <el-form ref="form" class="add" :rules="rules" :model="addData">
            <el-form-item prop="password">
                <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="addData.password"></el-input>
            </el-form-item>
            <el-form-item prop="rePassword">
                <el-input :prefix-icon="Lock" type="password" placeholder="请再次输入密码"
                    v-model="addData.rePassword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"  @click="showrepassword() ">确认</el-button>
            </el-form-item>
        </el-form>

        <el-dialog v-model="dialogVisible" :title="dialogname" width="500">
            <el-form ref="form" class="add" :rules="rules" :model="addData">
                <el-form-item prop="newpassword">
                    <el-input :prefix-icon="Lock" placeholder="请输入新密码" type="newpassword" 
                        v-model="addData.newpassword"></el-input>
                </el-form-item>
                <el-form-item prop="checknewpwd">
                    <el-input :prefix-icon="Lock" placeholder="请再次输入新密码" type="checknewpwd" 
                        v-model="addData.checknewpwd"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary"
                        @click="repassword()">确认</el-button>
                </div>
            </template>
        </el-dialog>
    </el-card>

</template>